import React, { useCallback } from 'react';
import { Form, Input, Button, Space } from 'antd';
import styles from './index.less';

interface FormBoxProps {
  onFormSearch: (values: any) => void;
  onReset: () => void;
}

const FormBox: React.FC<FormBoxProps> = ({ onFormSearch, onReset }) => {
  const [form] = Form.useForm();

  const handleSubmit = useCallback(
    (values) => {
      onFormSearch(values);
    },
    [onFormSearch],
  );

  const handleReset = useCallback(() => {
    onReset();
    form.resetFields();
  }, [onReset, form]);

  return (
    <div className={styles.form}>
      <Form form={form} layout="inline" onFinish={handleSubmit}>
        <Form.Item name="name" label="姓名">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item name="email" label="邮箱">
          <Input placeholder="请输入" />
        </Form.Item>
        <Form.Item className="buttonStyle1">
          <Space>
            <Button type="primary" htmlType="submit">
              查询
            </Button>
            <Button htmlType="button" onClick={handleReset}>
              重置
            </Button>
          </Space>
        </Form.Item>
      </Form>
    </div>
  );
};

export default FormBox;
